<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view class="vote-info">
		<view class="vote-info-title">
			<label :class="{'vote-status':true,coming:info.status==2,done:info.status==4}">{{ info.status==2?"即将开始":(info.status==3?"进行中":"已结束" ) }}</label>
			{{info.activityName}}
		</view>
		<view class="vote-statistic">
			<view class="vote-statistic-item">
				<view class="vote-statistic-number">
					{{itemList.length}}
				</view>
				<view class="vote-statistic-desc">
					候选项数量
				</view>
			</view>
			<view class="spilter">

			</view>
			<view class="vote-statistic-item">
				<view class="vote-statistic-number">
					{{totalVotes}}
				</view>
				<view class="vote-statistic-desc">
					累计票数
				</view>
			</view>
			<view class="spilter">

			</view>
			<view class="vote-statistic-item">
				<view class="vote-statistic-number">
					{{info.voter}}
				</view>
				<view class="vote-statistic-desc">
					参与人数
				</view>
			</view>
		</view>

		<view class="vote-content" v-if="info.config">

			<view style="font-weight: bold;">
				活动时间
			</view>
			<view style="display: flex;align-items: center;padding: 20rpx;">
				<icon type="waiting" size="16" />
				<view style="font-size: 28rpx;margin-left: 6rpx;">
					{{$funcs.toLocalTime(info.startTime).substring(0,16)}}/{{$funcs.toLocalTime(info.endTime).substring(0,16)}}
				</view>
			</view>
			<view style="font-weight: bold;">
				活动规则
			</view>
			<view style="padding: 12rpx 20rpx;">
				<view>
					● 每个账号{{limitTypes[info.config.limitType]}}可以投票{{info.config.limitNum}}次
				</view>
				<view>
					● {{info.config.isMore?'一次可以选择多个候选项':'一次只能选择一个候选项'}}
				</view>
				<view v-if="info.config.isMore && info.config.min">
					● 一次至少选择{{info.config.min}}项
				</view>
				<view v-if="info.config.isMore && info.config.max">
					● 一次至多选择{{info.config.max}}项
				</view>
			</view>
			<view style="font-weight: bold;">
				活动介绍
			</view>
			<view style="padding: 12rpx;text-indent: 2em;">
				{{info.content}}
			</view>

		</view>


		<view class="vote-list">
			<checkbox-group @change="checkboxChange" v-show="info.config.isMore">
				<view class="vote-list-item" v-for="(item,index) in itemList" :key="index" >
					<view class="vote-index">
						{{index+1}}
					</view>
					<image :src="coverList[index]" mode="" @click.native="viewDetail(item)"></image>				
					<view class="vote-item-info">
						<view class="first-line">
							<view class="vote-name">{{item.name}}</view>
							<view @click="viewDetail(item)">
								<view class="vote-info">详情</view>
							</view>
						</view>
						<view class="second-line">
							<view v-show="isVoteShow == true" class="vote-num">{{item.voteNum}}票</view>
							<view class="select">
								<checkbox :value="item.id" :checked="item.checked" />
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>

			<radio-group @change="radioChange" v-show="!info.config.isMore">
				<view class="vote-list-item" v-for="(item,index) in itemList" :key="index">
					<view class="vote-index">
						{{index+1}}
					</view>
					<image :src="coverList[index]" mode=""  @click.native="viewDetail(item)"></image>				
					<view class="vote-item-info">
						<view class="first-line">
							<view class="vote-name">{{item.name}}</view>
							<view class="vote-info" @click="viewDetail(item)">
								详情
							</view>
						</view>
						<view class="second-line">
							<view  class="vote-num" v-show="isVoteShow">{{item.voteNum}}票</view>
							<view class="select">
								<radio :value="item.id" :checked="index === current" />
							</view>
						</view>
					</view>
				</view>

			</radio-group>
		</view>

		<view style="display: flex;justify-content: center;margin-bottom: 60rpx;" v-if="info.status == 3">
			<button type="primary" @click="submit" style="width: 60%;background: #108EE9;">投票</button>
		</view>
		<view class="question-content">
			<comment ref="comment"></comment>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import comment from '../comment/comment.vue'
	export default {
		components:{comment},
		computed: {
			...mapState(['fontSize'])
		},
		data() {
			return {
				itemId: [],
				limitTypes: ['', '一共', '每天', '每周'],
				totalVotes: 0,
				info: {
					activityName: "",
					voter: 0,
					startTime: '',
					endTime: ''
				},
				itemList: [],
				coverList: [],
				voteShow:1,//1投票前显示，2投票后显示，3不显示
				isVoteShow:false,
				voteNum:0,//当前票数
			}
		},
		onLoad(option) {
			this.id = parseInt(option.id)
			this.getVoteInfo(this.id)
			// this.$refs.comment.getCommentList(this.id)
			this.$refs.comment.getActivityInfo(this.id)
			this.getVoteItem(this.id)
		},
		mounted() {

		},
		methods: {
			getVoteInfo(id) {
				this.isVoteShow = false
				uni.showLoading({
					title: "加载中"
				})
				this.$http.post('vx/activity/info', {
					id: id
				}).then(
					res => {
						if (res.code === 10000) {
							this.info = res.data
							this.voteShow = this.info.config.voteShow
							console.log((this.voteShow))
							// 未参与此活动情况下，只有投票前显示票数，才能看到票数，否则隐藏票数
							if(this.info.config.voteShow == 1 && this.info.isVoted == false){
								this.isVoteShow = true
							}else{
								this.isVoteShow = false
							}
							// 如果参与过此活动，并且投票前显示票数或者投票后显示票数，都可以看到票数
							if(this.info.isVoted == true){
								if(this.info.config.voteShow == 1 || this.info.config.voteShow == 2){
									this.isVoteShow = true
								}else{
									this.isVoteShow = false
								}
							}
							
							console.log(this.isVoteShow)
						}
					})
			},
			getVoteItem(id) {
				this.totalVotes = 0
				uni.showLoading({
					title: "加载中"
				})
				this.$http.post('activity/vote/list', {
					activityId: id
				}).then(
					res => {
						if (res.code === 10000) {
							// this.itemList = res.data.list || [];
							this.itemList = (res.data.list && res.data.list.filter(x=>x.status ==1)) ||[];
							console.log(this.itemList)
							this.coverList = [];
					
							this.itemList.forEach((x,index) => {
								this.totalVotes += x.voteNum;
								this.coverList.push('../../static/images/default.png')
								this.downLoadFile(x.cover,index);								
							})
							
						}
					})
			},
			downLoadFile(id,index) {
				this.$http.post('common/file/download', {
					id: id
				}).then(res => {				
					if (res.code == 10000) {
						
						this.coverList.splice(index,1, res.data.fileData)
						console.log(this.coverList)
					}else{
						
					}
				})
			},
			checkboxChange(e) {
				console.log(e.detail.value)
				this.itemId = e.detail.value.map(x => parseInt(x))

			},
			radioChange(e) {
				console.log(e.detail.value)
				this.itemId = [parseInt(e.detail.value)]
			},
			viewDetail(item) {
				
				uni.setStorageSync('voteItemDetail', item)
				uni.navigateTo({
					url: "../voteInfoDetail/voteInfoDetail"
				})
			},
			submit() {
				let msg = []
				if (this.info.config.isMore) {
					if (this.info.config.min > this.itemId.length) {
						msg.push('至少选择' + this.info.config.min + '个候选项')
					}
					if (this.itemId.length > this.info.config.max) {
						msg.push('至多选择' + this.info.config.max + '个候选项')
					}
				}
				if (msg.length > 0) {
					uni.showModal({
						title: '提示',
						content: msg.join(','),
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				} else {
					uni.showLoading({
						title: "投票中"
					})
					this.$http.post('vx/activity/vote', {
						activityId: this.id,
						itemId: this.itemId,
						userId: uni.getStorageSync('userInfo').id,
						projectId: uni.getStorageSync('projId')
					}).then(
						res => {
							if (res.code == 10000) {
								uni.showModal({
									title: "投票成功",
									showCancel: false,
									// success: () => {
									// 	uni.redirectTo({
									// 		url: "../voteList/voteList"
									// 	})
									// }
									
								})
								this.getVoteItem(this.id)
								// 如果是投票后显示或者投票前显示
								if(this.voteShow == 2 || this.voteShow == 1){
									this.isVoteShow = true
								}else{
									this.isVoteShow = false
								}
							} else {
								uni.showModal({
									title: res.msg,
									showCancel: false,

								})
							}
						}

					)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.question-content {
		border-top:1rpx solid #EEEEEE ;
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		margin-bottom: 20rpx;
		font-size: 32rpx;
	}
	.vote-info {
		font-size: 32rpx;
		.vote-info-title {
			position: relative;
			font-size: 34rpx;
			color: #FFFDE7;
			background-color: #108EE9;
			padding: 20rpx 40rpx;
			border-bottom: 1rpx solid #119cff;

			.vote-status {
				color: #FFFFFF;
				margin-right: 20rpx;
				padding: 0 6rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				background-color: #4CD964;
			}

			.coming {
				color: #55aa7f;
				background-color: #ffff7f;
			}

			.done {
				color: #ffffff;
				background-color: #767676;
			}
		}

		.vote-statistic {
			display: flex;
			height: 140rpx;
			background-color: #108EE9;
			color: #FFFFFF;
			justify-content: space-around;
			align-items: center;

			.spilter {
				width: 1rpx;
				height: 50%;
				background-color: #d1d1d1;
			}

			.vote-statistic-item {
				text-align: center;

				.vote-statistic-number {
					color: #ffc021;
					font-size: 38rpx;
				}

				.vote-statistic-desc {
					color: #dedede;
					font-size: 30rpx;
				}
			}
		}

		.vote-content {
			background-color: #eaeaea;
			border-radius: 8rpx;
			margin: 20rpx;
			padding: 20rpx;
			font-size: 28rpx;
			color: #909090;
		}

		.vote-list {
			padding: 50rpx;

			.vote-index {
				position: absolute;
				top: -30rpx;
				left: -30rpx;
				color: #ffffff;
				border-radius: 30rpx;
				width: 60rpx;
				height: 60rpx;
				background-color: #bebebe;
				text-align: center;
				line-height: 60rpx;
			}

			.vote-list-item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 60rpx;
				border: 1rpx solid #d6d6d6;
				padding: 20rpx;
				height: 200rpx;

				image {
					border: 1rpx solid #d6d6d6;
					padding: 10rpx;
					width: 140rpx;
					height: 140rpx;
				}


				.vote-item-info {
					height: 140rpx;
					flex: 1;
					padding: 0 0 0 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.first-line {
						display: flex;
						justify-content: space-between;

						.vote-name {
							padding-right: 20rpx;
							font-size: 28rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
						}

						.vote-info {
							// border: 1rpx solid #007AFF;
							// padding: 4rpx 16rpx;
							color: #007AFF;
							font-size: 28rpx;
							border-radius: 6rpx;
							width: 160rpx;
							text-align: right;
						}
					}

					.second-line {
						display: flex;
						justify-content: space-between;
						align-items: baseline;

						.vote-num {
							color: #007AFF;
							font-size: 28rpx;
						}

						.select {
							width: 60rpx;
							display: flex;
							margin-left: auto;
						}
					}
				}


			}
		}

	}
</style>
